<!--
 * @Author: wcx 1055127249@qq.com
 * @Date: 2024-12-23 10:38:21
 * @LastEditors: wcx 1055127249@qq.com
 * @LastEditTime: 2025-01-17 17:48:22
 * @FilePath: \my-project\src\views\Descriptions.vue
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->
<template>
  <el-table ref="filterTable" :data="tableData" border>
    <template v-for="item in columns" v-bind="item">
      <el-table-column v-if="item.prop === 'tag'" v-bind="item">
        <template v-if="item.prop === 'tag'" slot-scope="scope">
          <el-tag :type="scope.row.tag === '家' ? 'primary' : 'success'" disable-transitions>{{ scope.row.tag
            }}</el-tag>
        </template>
      </el-table-column>
      <el-table-column v-else v-bind="item"></el-table-column>
    </template>
  </el-table>
</template>

<script>
export default {
  data() {
    return {
      tableData: [
        { date: '2016-05-02', name: '王小虎', address: '上海市普陀区金沙江路 1518 弄', tag: '家' },
        { date: '2016-05-04', name: '王小虎', address: '上海市普陀区金沙江路 1517 弄', tag: '公司' },
        { date: '2016-05-01', name: '王小虎', address: '上海市普陀区金沙江路 1519 弄', tag: '家' },
        { date: '2016-05-03', name: '王小虎', address: '上海市普陀区金沙江路 1516 弄', tag: '公司' }
      ],
      columns: [
        {
          prop: 'date',
          label: '日期',
          filters: [
            { text: '2016-05-01', value: '2016-05-01' },
            { text: '2016-05-02', value: '2016-05-02' },
            { text: '2016-05-03', value: '2016-05-03' },
            { text: '2016-05-04', value: '2016-05-04' }
          ],
          filterMethod: this.filterHandler
        },
        {
          label: '姓名',
          prop: 'name',
        },
        {
          label: '地址',
          prop: 'address',
        },
        {
          prop: 'tag',
          label: '标签',
          filters: [
            { text: '家', value: '家' },
            { text: '公司', value: '公司' }
          ],
          filterMethod: this.filterHandler
        }
      ]
    }
  },
  methods: {
    resetDateFilter() {
      this.$refs.filterTable.clearFilter('date');
    },
    clearFilter() {
      this.$refs.filterTable.clearFilter();
    },
    filterTag(value, row) {
      return row.tag === value;
    },
    filterString(value, row, column) {
      return row[column.property].indexof(value) >= 0;
    },
    filterHandler(value, row, column) {
      return row[column.property] === value;
    }
  }
}
</script>